import React, { useState } from "react";
import classNames from "classnames";
import "./index.scss";
import { TitleBar } from "../title-bar";
import { Card } from "../card";
import { IOuterDateChart } from "src/interfaces";

interface DataType {
  icon: string;
  name: string;
  value: number;
}

interface OuterMemberDataType {
  originData: IOuterDateChart;
  type: string;
}
export const OuterMemberData = ({ originData, type }: OuterMemberDataType) => {
  const data: DataType[] = [
    { icon: "icon-wode", name: "成员总数", value: originData?.memberCount },
    {
      icon: "icon-wenjianjia",
      name: "上传文件总数",
      value: originData?.outerFileCount,
    },
    {
      icon: "icon-fenlei",
      name: "待完成任务",
      value: originData?.unFinishTaskCount,
    },
    {
      icon: "icon-shijian",
      name: "审阅意见数量",
      value: originData?.issueCount,
    },
    {
      icon: "icon-queren",
      name: "待确认批次",
      value: originData?.confirmCount,
    },
  ];
  return (
    <div className="outer-member-data">
      <TitleBar name="内部成员数据" />
      <Card>
        <div>
          {data.map((item) => {
            return (
              <div className="data-item" key={item.name}>
                <span className={classNames("iconfont icon", item.icon)}></span>
                <div className="data-container">
                  <span className="title">{item.name}</span>
                  <span className="data">{item.value}</span>
                </div>
              </div>
            );
          })}
        </div>
      </Card>
    </div>
  );
};
